import React, { useState,useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import './guan.css'
export default function Fan() {
  const navigate = useNavigate()
  const [lists,setlists] =useState([{id:1,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:2,text:'3月20日晚上7点半，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:3,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'银河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:4,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:5,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:6,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:7,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:8,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:9,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  ])

  const [index,setindex]=useState(0)
  const [flag,setflag] = useState(true)
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const handleSearch = () => {
    const results = lists.filter(item =>
      item.name.includes(searchTerm)
    );
    setSearchResults(results);
  };
  const cha=(e)=>{
    if(e.keyCode==13){
      handleSearch()
    }
  }

  useEffect(() => {
    handleSearch()
  },[lists])
  return (
    <div>
      <div className='gu-tou'>
        <div className='gu-zhu'>
          <span className='gu-zi' onClick={()=>{navigate('/app/my/dong')}}>{'<'}</span>
          <span style={{fontSize:'15px'}} >我的粉丝</span>
        </div>
        <input type='text' placeholder='搜索关键词' value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        onKeyDown={cha}></input>
      </div>
      <div className='gu-main'>
        {
          searchResults.map(item=>{
            return <div className='gu-nei'>
              <div className='gu-tu'><img src={item.tou}></img></div>
              <div className='gu-name' value={item.name} >{item.name}</div>
              <div key={item.id} onClick={()=>{setindex(item.id)}} ><img onClick={()=>{setflag(!flag)}} src={index==item.id&&flag?require('./img/相互关注.png'):require('./img/关注.png')}></img></div>
            </div>
          })
        }
      </div>
    </div>
  )
}
